<template>
	<div class="w-full h-full">
		<div ref="box" class="w-full h-full"></div>
	</div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';

const box = ref<HTMLElement>();

interface Iprops {
	data: any;
	color:string
}

const props = defineProps<Iprops>()

const setLine = (data: any,color:string)=>{
	let myChart = echarts.init(box.value);
	// 绘制图表
	myChart.setOption({
		tooltip: {},
		xAxis: {
			type: 'category',
			show:false
		},
		yAxis: {
			type: 'value',
			show:false
		},
		series: [
			{
				type: 'line',
				data: data,
				lineStyle:{
					color:color
				},
				symbol: 'none', // 不显示数据点标记
      			symbolSize: 0, // 数据点标记的大小设置为 0
			}
		]
	})
}

// watchEffect(()=>{
// 	console.log(props.color,'---')只能监听函数体内部的
// 	nextTick(()=>{
// 		console.log(props.color)
// 		setLine(props.data,props.color);监听不了内部函数体内部
// 	})
// },{immediate:false})

watch([() => props.data,()=>props.color],(nv,ov)=>{
	setLine(nv[0],nv[1]);
})

onMounted(() => {
	setLine(props.data,props.color);
})
</script>
<style lang="scss" scoped></style>
